<script setup>
import { reactive, toRefs, ref } from 'vue';
import { CloseBold } from '@element-plus/icons-vue';
import { ElDialog, ElForm, ElFormItem, ElIcon, ElInput, ElMessage } from 'element-plus';
import { isMobile } from '@/common/common-helper';
import { useCommonStore } from '../../stores/index';

const commonStore = useCommonStore();

const props = defineProps({
  phoneShow: Boolean,
});
const { phoneShow } = toRefs(props);
const emit = defineEmits(['handleOpenChangeShow']);

const formRef = ref(null);

const changePhone = reactive({
  oldPassword1: '',
  oldPassword: '',
  newPhone: '',
  checkPhone: '',
});

//验证密码
const validatePassOld = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('密码不能为空'));
  }
};

//验证手机号

const validatePass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入手机号'));
  } else if (!isMobile(changePhone.value)) {
    callback(new Error('手机号格式不正确'));
  } else {
    if (changePhone.checkPhone !== '') {
      if (!changePhone.value) return;
      changePhone.value.validateField('checkPhone', () => null);
    }

    callback();
  }
};

//再次验证新密码

const validatePass2 = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('手机号不能为空，请重新输入'));
  } else if (value !== changePhone.newPhone) {
    callback(new Error('两次输入的手机号不相等，请重新输入'));
  } else {
    callback();
  }
};

const rules = reactive({
  oldPassword: [{ validator: validatePassOld, trigger: 'blur', required: true }],
  newPhone: [
    { validator: validatePass, trigger: 'blur', required: true },
    { min: 6, max: 15, message: '11', trigger: 'blur' },
  ],
  checkPhone: [{ validator: validatePass2, trigger: 'blur', required: true }],
});

const closeBoxShowDialog = () => {
  commonStore.SET_ACTIVE_PERSONAL_SHOW(true);
  formRef.value.resetFields();

  emit('handleOpenChangeShow', 'phone');
};

const handleSubmitForm = () => {
  if (!changePhone.oldPassword || !changePhone.newPhone || !changePhone.checkPhone) {
    ElMessage({
      message: `带星号的不能为空`,
      type: 'warning',
    });

    return;
  }

  if (!isMobile(changePhone.newPhone)) {
    ElMessage({
      type: 'warning',
      message: `手机号格式错误`,
    });

    return;
  }

  if (changePhone.newPhone !== changePhone.checkPhone) {
    ElMessage({
      type: 'warning',
      message: `两次输入手机号不相等，请重新输入`,
    });

    return;
  }
};
</script>

<template>
  <div class="change_phone_root">
    <ElDialog
      v-if="phoneShow"
      v-model="phoneShow"
      :append-to-body="false"
      :close-on-click-modal="false"
      destroy-on-close
      :show-close="false"
      :align-center="true"
    >
      <template #header>
        <div class="my-header">
          <div class="dialog-title">更换手机号</div>
          <div class="dialog-close" @click="closeBoxShowDialog()">
            <ElIcon color="#333333">
              <CloseBold />
            </ElIcon>
          </div>
        </div>
      </template>
      <main>
        <div class="change_password">
          <ElForm
            ref="formRef"
            :model="changePhone"
            :rules="rules"
            status-icon
            label-width="110px"
            class="demo-ruleForm"
          >
            <ElFormItem label="登录密码" prop="oldPassword">
              <ElInput v-model.trim="changePhone.oldPassword1" style="display: none" clearable show-password />
              <ElInput
                v-model.trim="changePhone.oldPassword"
                type="password"
                onfocus="this.removeAttribute('readonly');this.type='password'"
                autocomplete="new-password"
                show-password
                clearable
                readonly
              ></ElInput>
            </ElFormItem>
            <ElFormItem label="新手机号码" prop="newPhone">
              <ElInput v-model.trim="changePhone.newPhone" clearable> </ElInput>
            </ElFormItem>
            <ElFormItem label="确认手机号码" prop="checkPhone">
              <ElInput v-model.trim="changePhone.checkPhone" clearable></ElInput>
            </ElFormItem>
          </ElForm>
        </div>
      </main>

      <div class="dialog-footer">
        <div @click="closeBoxShowDialog()">取消</div>
        <div @click="handleSubmitForm()">确定</div>
      </div>
    </ElDialog>
  </div>
</template>

<style scoped lang="scss">
.change_phone_root {
  :deep(.el-dialog) {
    width: 770px;
    height: 466px;
    border-radius: 10px;
  }

  :deep(.el-dialog__header) {
    padding: 0 !important;
  }

  .my-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding-left: 32px;
    color: #333333;
    border-bottom: 1px solid #f8f8f8;

    .dialog-title {
      font-size: 18px;
      font-family: Source Han Sans CN;
    }

    .dialog-close {
      cursor: pointer;
    }
  }
  .dialog-footer {
    position: absolute;
    right: 20px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 108px;
      height: 40px;
      font-size: 16px;
      font-family: Source Han Sans CN, Source Han Sans CN-Normal;
      border: 1px solid #00ad93;
      border-radius: 6px;
      cursor: pointer;

      &:first-child {
        margin-right: 20px;
        color: #00ad93;
      }

      &:nth-child(2) {
        color: #ffffff;
        background: #00ad93;
      }
    }
  }
}
</style>
